<!-- saved from url=(0042)http://localhost:8090/personalCenter/index -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>个人中心</title>


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="SHORTCUT ICON" href="http://localhost:8090/images/logo/logo_blue.png">

    <link rel="stylesheet" href="./个人中心_files/bootstrap.min.css">

    <link rel="stylesheet" href="./个人中心_files/educhains.css">


    <link rel="stylesheet" href="./个人中心_files/header.css">


    <link rel="stylesheet" href="./个人中心_files/personalCenter.css">
    <link rel="stylesheet" href="./个人中心_files/bootstrap.min.css">
    <link rel="stylesheet" href="./个人中心_files/jquery.Jcrop.css">
    <script src="./个人中心_files/jquery.min-1.9.0.js" type="text/javascript"></script>
    <script src="./个人中心_files/jquery.Jcrop.js" type="text/javascript"></script>

</head>
<body style="zoom: 1;">


<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed brand" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://localhost:8090/personalCenter/index#" style="color: #004a86">EDU
                Chain</a>
            <img src="./个人中心_files/line_short.png" id="line_short1">
            <a href="http://localhost:8090/personalCenter/index"><img src="./个人中心_files/search.png" class="search_logo"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown loginMenu">
                    <a href="http://localhost:8090/personalCenter/index#" class="dropdown-toggle" data-toggle="dropdown"
                       role="button" aria-haspopup="true" aria-expanded="false">


                        个人中心


                        <span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                    <ul class="dropdown-menu">


                        <li><a href="http://localhost:8090/personalCenter/index" class="">个人中心</a></li>
                        <li><a href="http://localhost:8090/wallet/index" class="">优得钱包</a></li>
                        <li><a href="http://localhost:8090/logout">退出登陆</a></li>


                    </ul>
                </li>
                <li class="divideBar"></li>
                <img src="./个人中心_files/line_short.png" id="line_short2">


            </ul>
        </div>
    </div>
</nav>

<div class="personal-container">
    <div class="personal-header">
        <div class="personal-header-content">
            <div class="header-portrait">

                <img src="./个人中心_files/150546463404263988835_cut.jpg" class="portrait img-circle" data-toggle="modal"
                     data-target="#uploadUserPhotoModal">
                <p class="username">123123</p>
            </div>
            <div class="personal-attribution">贡献值 <span class="shownumber">123</span></div>
            <div class="personal-relation">


                <span class="personal-focus">获赞 <a href="http://localhost:8090/personalCenter/index#"
                                                   class="personal-underline shownumber">123</a></span>
                <span class="personal-fans">粉丝 <a href="http://localhost:8090/personalCenter/index#"
                                                  class="personal-underline shownumber">123</a></span>
            </div>
            <div class="personal-information">
                <img src="./个人中心_files/Tel.png" class="personal-phone" data-toggle="popover" data-placement="top"
                     data-content="123" data-original-title="" title="">
                <img src="./个人中心_files/e-mail.png" class="personal-email" data-toggle="popover" data-placement="top"
                     data-content="1252192520@qq.com" data-original-title="" title="">
                <a href="http://localhost:8090/personalCenter/index#" class="personal-edit">
                    <img src="./个人中心_files/edit.png" class="edit-icon">
                    修改资料
                </a>
            </div>
        </div>
    </div>
    <ul class="personal-menu-bar">
        <li><a href="http://localhost:8090/personalCenter/index#" class="menu-bar-panel" id="menu-article">文章</a></li>
        <li class="divideBar"></li>
        <li><a href="http://localhost:8090/personalCenter/index#" class="menu-bar-panel" id="menu-post">帖子</a></li>
        <li class="divideBar"></li>
        <li><a href="http://localhost:8090/personalCenter/index#" class="menu-bar-panel" id="menu-activity">活动</a></li>
        <li class="divideBar"></li>
        <li><a href="http://localhost:8090/personalCenter/index#" class="menu-bar-panel" id="menu-communication">师徒</a>
        </li>
    </ul>
    <div class="personal-content">
        <div class="article-container">
            <div class="article-content">

                <nav aria-label="Page navigation" class="page-divider">
                    <ul class="pagination">
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="First">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li class="active"><a href="http://localhost:8090/personalCenter/index#">1</a></li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Last">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="post-container">
            <div class="post-content">


                <nav aria-label="Page navigation" class="page-divider">
                    <ul class="pagination">
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="First">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li class="active"><a href="http://localhost:8090/personalCenter/index#">1</a></li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Last">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="activity-container">
            <div class="activity-content">


                <nav aria-label="Page navigation" class="page-divider">
                    <ul class="pagination">
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="First">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li class="active"><a href="http://localhost:8090/personalCenter/index#">1</a></li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8090/personalCenter/index#" aria-label="Last">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <div class="personal-communication">
        <div class="communication-content">

        </div>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade in" id="uploadUserPhotoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="false" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">头像上传</h4>
            </div>
            <div class="modal-body">


                <form name="form" action="http://localhost:8090/personalCenter/uploadUserPhoto" class="form-horizontal"
                      method="post" enctype="multipart/form-data">
                    <div class="modal-body text-center">
                        <div class="zxx_main_con">
                            <div class="zxx_test_list">
                                <input class="photo-file" type="file" name="imgFile" id="fcupload"
                                       onchange="readURL(this);">
                                <div class="jcrop-holder"
                                     style="width: 321px; height: 321px; position: relative; background-color: black;">
                                    <div style="position: absolute; z-index: 600; width: 180px; height: 180px; top: 20px; left: 20px;">
                                        <div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
                                            <div class="jcrop-hline" style="position: absolute; opacity: 0.4;"></div>
                                            <div class="jcrop-hline bottom"
                                                 style="position: absolute; opacity: 0.4;"></div>
                                            <div class="jcrop-vline right"
                                                 style="position: absolute; opacity: 0.4;"></div>
                                            <div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div>
                                            <div class="jcrop-tracker"
                                                 style="cursor: move; position: absolute; z-index: 360;"></div>
                                        </div>
                                        <div style="width: 100%; height: 100%; z-index: 320; display: block;">
                                            <div class="ord-n jcrop-dragbar"
                                                 style="cursor: n-resize; position: absolute; z-index: 370;"></div>
                                            <div class="ord-s jcrop-dragbar"
                                                 style="cursor: s-resize; position: absolute; z-index: 371;"></div>
                                            <div class="ord-e jcrop-dragbar"
                                                 style="cursor: e-resize; position: absolute; z-index: 372;"></div>
                                            <div class="ord-w jcrop-dragbar"
                                                 style="cursor: w-resize; position: absolute; z-index: 373;"></div>
                                            <div class="ord-n jcrop-handle"
                                                 style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div>
                                            <div class="ord-s jcrop-handle"
                                                 style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div>
                                            <div class="ord-e jcrop-handle"
                                                 style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div>
                                            <div class="ord-w jcrop-handle"
                                                 style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div>
                                            <div class="ord-nw jcrop-handle"
                                                 style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div>
                                            <div class="ord-ne jcrop-handle"
                                                 style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div>
                                            <div class="ord-se jcrop-handle"
                                                 style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div>
                                            <div class="ord-sw jcrop-handle"
                                                 style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div>
                                        </div>
                                    </div>
                                    <div class="jcrop-tracker"
                                         style="width: 325px; height: 325px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;"></div>
                                    <input type="radio" class="jcrop-keymgr"
                                           style="position: fixed; left: -120px; width: 12px;">
                                    <div style="position: absolute; z-index: 240; opacity: 0.4;">
                                        <div style="position: absolute; background-color: black; left: 20px; width: 180px; height: 20px;"></div>
                                        <div style="position: absolute; background-color: black; height: 321px; width: 20px;"></div>
                                        <div style="position: absolute; background-color: black; height: 321px; left: 200px; width: 121px;"></div>
                                        <div style="position: absolute; background-color: black; top: 200px; left: 20px; width: 180px; height: 121px;"></div>
                                    </div>
                                    <img alt="" id="cutimg"
                                         src=""
                                         style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 321px; height: 321px; opacity: 1;">
                                    <div id="preview-pane">
                                        <div class="preview-container">
                                            <img class="jcrop-preview" alt="预览"
                                                 src=""
                                                 style="margin-left: -22px; margin-top: -22px;">
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" id="x" name="x" value="20">
                                <input type="hidden" id="y" name="y" value="20">
                                <input type="hidden" id="w" name="w" value="180">
                                <input type="hidden" id="h" name="h" value="180">
                            </div>
                        </div>
                    </div>


                    <div class="modal-footer" hidden="">
                        <button id="submit" onclick="">上传</button>
                    </div>
                </form>
            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="$(&#39;#submit&#39;).click()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="footer" style="width: 100%; text-align: center; position: absolute; bottom: 0;">
    Copyright © 2017 A.L.T All Rights Reserved
</div>

<script src="./个人中心_files/bootstrap.min.js"></script>
<script src="./个人中心_files/personalCenter.js" type="text/javascript"></script>

<script type="text/javascript">
    console.log("/personalCenter/uploadUserPhoto");
    //定义一个全局api，这样操作起来比较灵活
    var api = null;
    var boundx;
    var boundy;

    var preview = $('#preview-pane');
    var pcnt = $('#preview-pane .preview-container');
    var pimg = $('#preview-pane .preview-container img');

    var xsize = pcnt.width();
    var ysize = pcnt.height();
    console.log(xsize);
    console.log(ysize);
    console.log("resources/uploadImages/150546463404263988835_cut.jpg");

    function readURL(input) {
        if (input.files && input.files[0]) {
            console.log("file");
            var reader = new FileReader();
            console.log(reader);
            reader.readAsDataURL(input.files[0]);
            console.log(reader);
            reader.onload = function (e) {
                console.log("onload");
                $('#cutimg').removeAttr('src');
                $('#cutimg').attr('src', e.target.result);
                pimg.removeAttr('src');
                pimg.attr('src', e.target.result);

                api = $.Jcrop($('#cutimg'), {
                    setSelect: [20, 20, 200, 200],
                    aspectRatio: 1,
                    onSelect: updateCoords,
                    onChange: updateCoords
                });
                console.log(api);
                var bounds = api.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                preview.appendTo(api.ui.holder);
            };
            console.log(reader);
            console.log("after render");
            console.log(api);
            if (api != undefined) {
                console.log("destroy");
                api.destroy();
            }
        }

        function updateCoords(obj) {
            console.log("update coords");
            $("#x").val(obj.x);
            $("#y").val(obj.y);
            $("#w").val(obj.w);
            $("#h").val(obj.h);
            if (parseInt(obj.w) > 0) {
                var rx = xsize / obj.w;
                var ry = ysize / obj.h;
                pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * obj.x) + 'px',
                    marginTop: '-' + Math.round(ry * obj.y) + 'px'
                });
            }
        }
    }
</script>

<div class="modal-backdrop fade in"></div>
</body>
</html>